import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import {browserHistory,Link} from 'react-router';
import SweetAlert from 'react-bootstrap-sweetalert';
import { connect } from 'react-redux';
import { ProfileDetail,ProfileChange } from '../../Redux/Actions/profileAction';
import { OrderUser } from '../../Redux/Actions/orderAction';
import {SingleInfo,InfoImage3} from '../common/Forminfo';

class DetailProfile extends Component {

  constructor(props) {
    super(props)
    this.state = {
        products : [],
        remark:"",
        pass:"tohide",
        nopass:"tohide"
    }
    this.toNeworder = this.toNeworder.bind(this);
    this.pass = ()=>{
        const token = this.props.authReducer.user.data.token;
        const opt = {
            authState:"pass",
            profileId:this.props.profileReducer.special.data[0].userId,
            authRemark:""
        }
        this.props.dispatch(ProfileChange(token,opt))
        this.setState({pass:"tohide"});
        browserHistory.push("/main/profileall")
    }
    this.nopass = (text)=>{
        const token = this.props.authReducer.user.data.token;
        const opt = {
            authState:"noPass",
            profileId:this.props.profileReducer.special.data[0].userId,
            authRemark:text
        }
        this.props.dispatch(ProfileChange(token,opt))
        this.setState({nopass:"tohide"});
        browserHistory.push("/main/profileall")
    }
  }

  componentWillMount(){
      const token = this.props.authReducer.user.data.token;
      const opt = {
        truename:this.props.location.state.truename,
        password:this.props.location.state.password
      }
      const profile = {
          profileId:this.props.location.state.userId,
          state:["going","finish","cancel","canceling"]
      }
      this.props.dispatch(ProfileDetail(token,opt));
      this.props.dispatch(OrderUser(token,profile));
  }

  priceFormatter(cell, row){
    return <Link to={{pathname:"/cost",state:{orderstate:row.state,orderId:row.id}}}>详情</Link>;
  }
  carriageFormatter(cell, row){
    // if(cell != "null"){
      return <Link to={{pathname:"/carriage",state:{orderstate:row.state,orderId:row.id}}}>详情</Link>;
    // }else{
    //   return "未开始";
    // }
  }
  openerdetail(cell,row){
    // if(cell == null){
    //   return <Link to={{pathname:"/openeradd",query:{orderId:row.id,carType:row.carType,carFrameNo:row.carFrameNo}}}>添加</Link>;
    // }else{
      return <Link to={{pathname:"/openerdetail",state:{orderId:row.id,carType:row.carType,carFrameNo:row.carFrameNo,orderstate:row.state}}}>详情</Link>;
    // }
  }
  applydetail(cell,row){
    // if(cell==null){
    //   return "暂无信息";
    // }else{
      return <Link to={{pathname:"/applydetail",state:{orderId:row.id,orderstate:row.state}}}>详情</Link>;
    // }
  }
  operateFormatter(cell,row){
    if(cell == "finish"){
      return "已完成";
    }else if(cell == "canceling"){
      return "是否取消";
    }else if(cell == "going"){
      return <span className="cancel-operate" onClick={()=>{document.getElementById("alertwrap").style.display = 'block'}}>取消订单</span>;
    }else{
      return "已取消";
    }
  }

  toNeworder(){
    browserHistory.push('/neworder');
  }

  render() {
    //个人信息
    const profile = this.props.profileReducer.special.data;
    let profileinfo =[];
    let remark = [];
    if(profile){
        if(profile[0].authRemark != ""){
           remark =  <SingleInfo label="未通过理由" info={profile[0].authRemark}/>
        }
        profileinfo = <div className="form-horizontal">
                    {remark}
                    <SingleInfo label="真实名称" info={profile[0].truename}/>
                    <SingleInfo label="手&nbsp;&nbsp;机&nbsp;&nbsp;号" info={profile[0].phone}/>
                    <SingleInfo label="QQ&nbsp;&nbsp;&nbsp;&nbsp;" info={profile[0].qq}/>
                    <SingleInfo label="公司名称" info={profile[0].company}/>
                    <SingleInfo label="公司注册号" info={profile[0].registerNo}/>
                    <InfoImage3 name="身&nbsp;&nbsp;份&nbsp;&nbsp;证" src={profile[0].identityUrl} />
                    <InfoImage3 name="营业执照" src={profile[0].businessLicenseUrl} />
                  </div>
    }else{
        profileinfo = <div className="form-horizontal"></div>
    }
    //通过状态
    let profilestate = []
    if(profile){
        if(profile[0].authState == "pass"){
            profilestate = <div className="panel-heading">
                    用户信息
                    <span className="pull-right blue" style={{marginTop:"6px"}}>已通过</span>
                </div>
        }else if(profile[0].authState == "noPass"){
            profilestate = <div className="panel-heading">
                    用户信息
                    <span className="pull-right blue" style={{marginTop:"6px"}}>未通过</span>
                </div>
        }else{
            profilestate = <div className="panel-heading">
                    用户信息
                    <button className="pull-right btn btn-danger" style={{marginTop:"6px"}} onClick={()=>{this.setState({nopass:"toshow"})}}>不通过</button>
                    <button className="pull-right btn btn-primary" style={{marginTop:"6px",marginRight:"15px"}} onClick={()=>{this.setState({pass:"toshow"})}}>通过</button>
                </div>
        }
    }
    const products = this.props.orderReducer.orderuser.data;
    const options = {
        page: 1, 
        sizePerPageList: [],
        sizePerPage: 10, 
        pageStartIndex: 0,
        paginationSize: 3,  
        prePage: 'Prev', 
        nextPage: 'Next', 
        firstPage: 'First',
        lastPage: 'Last',
        paginationShowsTotal: this.renderShowsTotal, 
        noDataText: '目前无订单' 
      }
    const customStyle = {
          overlay : {
            position          : 'fixed',
            width             : '100%',
            top               : 0,
            left              : 0,
            right             : 0,
            bottom            : 0,
            backgroundColor   : 'rgba(255, 255, 255, 0.75)'
          },
          content : {
            position                   : 'absolute',
            width                      : '60%',
            height                     : '350px',
            top                        : '10%',
            left                       : '20%',
            right                      : '20%',
            border                     : '1px solid #ccc',
            background                 : '#fff',
            overflow                   : 'auto',
            WebkitOverflowScrolling    : 'touch',
            borderRadius               : '4px',
            outline                    : 'none',
            padding                    : '20px'
          }
    }
    return (
        <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
          <div className="row">
            <ol className="breadcrumb">
              <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
              <li className="active">用户信息</li>
            </ol>
          </div>
          <div className="row">
            <div className="col-lg-12">
              <div className="panel panel-default">
                {profilestate}
                <div className="panel-body">
                    {profileinfo}
                </div>
                <div className="panel-body">
                  <BootstrapTable data={products} 
                      striped={true} hover={true} search={true} 
                      pagination={true} options={options} searchPlaceholder='请输入您要查询的信息'>
                      <TableHeaderColumn dataField="id" isKey={true} width="160px" dataAlign="center">订单号</TableHeaderColumn>
                      <TableHeaderColumn dataField="carType" dataAlign="center">车型</TableHeaderColumn>
                      <TableHeaderColumn dataField="carFrameNo" dataAlign="center">车架号</TableHeaderColumn>
                      <TableHeaderColumn dataField="Issuing" dataAlign="center" width="60px" dataFormat={this.openerdetail}>开证</TableHeaderColumn>
                      <TableHeaderColumn dataField="CustomsClearance" dataAlign="center" width="60px" dataFormat={this.applydetail}>报关</TableHeaderColumn>
                      <TableHeaderColumn dataField="Transport" dataAlign="center" width="60px" dataFormat={this.carriageFormatter}>运输</TableHeaderColumn>
                      <TableHeaderColumn dataField="fee"  dataAlign="center" width="60px" dataFormat={this.priceFormatter}>成本</TableHeaderColumn>
                      <TableHeaderColumn dataField="state" dataAlign="center" width="100px" dataFormat={this.operateFormatter}>操作</TableHeaderColumn>
                  </BootstrapTable>
                </div>
              </div>
            </div>
          </div>
          <div className={this.state.pass}>
              <SweetAlert
              info
              showCancel
              cancelBtnText="取消"
              confirmBtnText="确定"
              confirmBtnBsStyle="primary"
              title="确定通过资质审核吗？"
              cancelBtnBsStyle="default"
              onConfirm={this.pass}
              onCancel={()=>{this.setState({pass:"tohide"})}}
              >
              </SweetAlert>
          </div>
          <div  id="alertwrap" className={this.state.nopass}>
              <SweetAlert
              input
              showCancel
              cancelBtnText="取消"
              confirmBtnText="确定"
              confirmBtnBsStyle="primary"
              cancelBtnBsStyle="default"
              title="确定不通过资质审核吗？"
              onConfirm={(text)=>{this.nopass(text)}}
              onCancel={()=>{this.setState({nopass:"tohide"})}}
              >
              </SweetAlert>
          </div>
          <div ref="alertwrap" id="alertwrap" style={{"display":"none"}}>
            <SweetAlert
              warning
              showCancel
              cancelBtnText="取消"
              confirmBtnText="确定"
              confirmBtnBsStyle="primary"
              cancelBtnBsStyle="default"
              //customIcon="thumbs-up.jpg"
              title="确定取消订单吗？"
              onConfirm={()=>{this.refs.alertwrap.style.display = "none"}}
              onCancel={()=>{this.refs.alertwrap.style.display = "none"}}
              >
              点击确定，将取消订单！
            </SweetAlert>
          </div>
        </div>
    )
  }
}
export default connect((state) => {
    const { authReducer,orderReducer,profileReducer } = state;
    return {
        authReducer,orderReducer,profileReducer
    }
})(DetailProfile); 